<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>v-show的使用</title>
  </head>
  <body>
    <div id="app">
      <!-- 
        v-show: 用来控制标签的展示还是隐藏
       -->
      <h2 v-show="type">逝水无痕博客</h2>
      <input type="button" value="展示隐藏标签" @click="showtag" />
      <h1 v-show="age >30">不小啦</h1>
      <input
        type="button"
        value="通过修改age值控制标签展示"
        @click="changeage"
      />
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        type: false,
        age: 23,
      },
      methods: {
        showtag() {
          this.type = !this.type;
        },
        changeage() {
          this.age++;
          console.log(this.age);
        },
      },
    });
  </script>
</html>
